<script setup lang="ts">
import { ref, defineProps, PropType, computed } from 'vue'
import { ShopOrderItem, ORDERSTATUS } from '@/pages/order/types'

type PayStatus = keyof typeof ORDERSTATUS | undefined
/**
 * 商品展示
 * @property {info} 包裹信息
 * @property {isDetail} 详情展示方式 默认列表
 * @property {payStatus} 支付状态
 * @property {isShowBtn} 是否展示下面按钮若展示payStatus必填
 */
const $props = defineProps({
    info: {
        type: Object as PropType<ShopOrderItem>,
        default() {
            return {}
        },
    },
    isDetail: {
        type: Boolean,
        default: false,
    },
    payStatus: {
        type: String as PropType<PayStatus>,
        default: '',
    },
    navigateToGoodsInfo: { type: Boolean, default: true },
    isShowBtn: { type: Boolean, default: false },
    rightFlex: { type: Boolean, default: false },
    priceFlex: { type: Boolean, default: false },
    orderNo: { type: String, default: '' },
    orderListShowAfsStatus: { type: Boolean, default: false },
})
const { divTenThousand } = useConvert()
// 选择打开 售后弹层
// const isShowSheet = ref(false)
// const selectionList = ref<AfssTypeItem[]>([])
/**
 * 售后状态
 */

// const afsStatus = computed(() => getAsfsStatusBtnCn($props.info.afsStatus))
const dealPrice = computed(() => ($props.info?.dealPrice ? divTenThousand($props.info.dealPrice) : 0))

// initARefundType()

// /**
// //  * 选择售后方式
// //  */
// function initARefundType() {
//     for (const [key, val] of Object.entries(aRefundType)) {
//         selectionList.value.push({
//             fontSize: 28,
//             text: val,
//             key,
//         })
//     }
// }
// /**
// //  * 包裹发货状态
// //  */
// const packageStatus = (packageStatus?: keyof typeof PACKAGESTATUS) => {
//     return packageStatus ? getPackagecn(packageStatus) : '待发货'
// }
// /**
// //  * 导航去申请售后(设置缓存拿的最新数据)
// //  */
// const handleGoApplyAfterSales = () => {
//     storage.set('applyAfterSalesOrder', $props.info)
//     if (afsStatus.value !== '申请售后')
//         return uni.navigateTo({
//             url: `/basePackage/pages/detailsRefund/DetailsRefund?no=${$props.info.afsNo}&packageId=${$props.info.packageId}`,
//         })
//     isShowSheet.value = true
// }
// /**
// //  * 申请退款 || 申请退货退款
// //  */
// const handleClickSheet = (index: number) => {
//     uni.navigateTo({
//         url: `/basePackage/pages/applyAfterSales/ApplyAfterSales?type=${selectionList.value[index].key}&no=${$props.orderNo}&itemId=${$props.info?.id}`,
//     })
// }
// /**
// //  * 去申请退款
// //  */
// const handleGoApplyRefund = () => {
//     uni.navigateTo({
//         url: `/basePackage/pages/applyAfterSales/ApplyAfterSales?type=${selectionList.value[0].key}&no=${$props.orderNo}&itemId=${$props.info?.id}`,
//     })
// }
// const handleNavToShop = () => {
//     if ($props.navigateToGoodsInfo) {
//         uni.navigateTo({
//             url: `/basePackage/pages/commodityInfo/InfoEntrance?goodId=${$props.info.productId}&shopId=${$props.info.shopId}`,
//         })
//     }
// }
// /**
// //  * 没发货加上运费 发货后不计运费  dealPrice*num - fixPrice <= 0《（freightPrice）
//  * info 0 元 购买 不展示售后按钮
// //  */
// function isAfsPriceComputed(info: ShopOrderItem) {
//     const { dealPrice, num, fixPrice, packageId, freightPrice } = info
//     const price = new Decimal(dealPrice).div(num).sub(fixPrice)
//     if (packageId) {
//         return divTenThousand(price).toNumber() <= 0
//     } else {
//         return divTenThousand(price.add(freightPrice)).toNumber() <= 0
//     }
// }
</script>
<template>
    <view class="good">
        <view class="good__item">
            <view class="good__item-container">
                <view class="good__item-left">
                    <u-image :src="$props.info.image" width="100%" mode="scaleToFill" height="100%" border-radius="30" />
                </view>
                <view class="good__item-right" :class="{ 'good__item-right-flex': $props.rightFlex }">
                    <view class="good__flex">
                        <text :class="['good__item-right--title', $props.isDetail ? '' : 'is-overflow']">{{ $props.info.productName }}</text>
                        <text v-if="!$props.isDetail" class="good__item-right--price">{{ dealPrice }}</text>
                    </view>
                    <view class="good__flex">
                        <text class="good__item-right--spec">{{ $props.info.specs && $props.info.specs.join(',') }}</text>
                        <text v-if="!$props.rightFlex" class="good__item-right--number">{{ $props.info.num }}</text>
                        <!-- <text
                            v-if="getOrderListShowAfsStatusCn($props.info.afsStatus) && $props.orderListShowAfsStatus"
                            class="good__item-right--afs"
                        >
                            {{ getOrderListShowAfsStatusCn($props.info.afsStatus) }}
                        </text> -->
                    </view>
                    <!-- <view v-if="!$props.isDetail" class="good__item-right--status">{{getPackagecn($props.info.)}}</view> -->
                    <view v-if="$props.isDetail" class="good__item-right--price" :class="{ 'good__item-right--price-flex': $props.priceFlex }">
                        {{ dealPrice }}
                        <text v-if="$props.rightFlex" class="good__item-right--number">{{ $props.info.num }}</text>
                    </view>
                    <!-- 如果订单关闭不展示按钮 WAITING_FOR_RECEIVE-->
                </view>
            </view>
            <!-- 申请售后按钮 -->
            <!-- <view v-if="$props.payStatus === 'PAID' && $props.isShowBtn && !isAfsPriceComputed($props.info)" class="good__item-bottom">
                <view class="good__item-bottom--status" shape="circle" plain>{{ packageStatus($props.info.packageStatus) }}</view>
                <u-button
                    v-if="$props.info.packageStatus === 'WAITING_FOR_DELIVER' && $props.info.afsStatus === 'NONE'"
                    plain
                    size="medium"
                    shape="circle"
                    class="afs-btn"
                    @click.stop="handleGoApplyRefund"
                >
                    申请退款
                </u-button>
                <u-button v-else plain size="medium" shape="circle" class="afs-btn" @click="handleGoApplyAfterSales">{{ afsStatus }}</u-button>
            </view> -->
        </view>
    </view>
    <!-- <u-action-sheet v-model="isShowSheet" :border-radius="20" :cancel-btn="false" :list="selectionList" @click="handleClickSheet" /> -->
</template>

<style lang="scss" scoped>
@import '@/assets/css/mixins/mixins.scss';
@include b(good) {
    @include e(item-container) {
        @include flex(flex-start, flex-start);
    }
    @include e(item) {
        margin-bottom: 14rpx;
    }
    @include e(item-bottom) {
        @include flex;
        justify-content: space-between;
        padding-bottom: 10rpx;
        @include m(status) {
            color: red;
            text-align: center;
        }
    }
    @include e(item-left) {
        width: 200rpx;
        height: 200rpx;
    }
    @include e(item-right-flex) {
        height: 180rpx;
        @include flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;
    }
    @include e(item-right) {
        flex: 1;
        margin-left: 22rpx;
        @include m(title) {
            font-size: 28rpx;
        }
        @include when(overflow) {
            width: 260rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-weight: bold;
        }
        @include m(price-flex) {
            width: 450rpx;
            @include flex;
            justify-content: space-between;
        }
        @include m(afs) {
            position: absolute;
            right: 0;
            top: 50rpx;
            font-size: 22rpx;
            color: #ffbf00;
        }
        @include m(price) {
            font-size: 30rpx;
            font-weight: bold;

            &::before {
                content: '￥';
                display: inline-block;
                font-size: 10rpx;
                margin-right: 2rpx;
            }
            & text {
                flex: 1;
                font-size: 24rpx;
                color: #777777;
                text-align: right;
            }
        }
        @include m(spec) {
            font-size: 24rpx;
            color: #777777;
        }
        @include m(number) {
            font-size: 24rpx;
            color: #121212;
            &::before {
                content: '×';
                display: inline-block;
            }
        }
        @include m(status) {
            font-size: 22rpx;
            color: #ffbf00;
            text-align: right;
        }
    }
    @include e(flex) {
        position: relative;
        @include flex(space-between);
        margin-bottom: 14rpx;
    }
}
@include b(afs-btn) {
    margin: 0;
    padding: 0 35rpx;
    z-index: 0;
}
@include b(afs) {
    color: #f12f22;
}
</style>
